
<template>
  <a-row>
    <a-col :span="12">
      <div class="bg-white" style="width: 550px;">
        <div class="p-3 min-w-[300px]  ">
          <div class="text-[#444E84] text-[14px]">
            <a-space>
              <div class="tags"></div>{{ $t('user.verification-code.required111566110577218') }}
            </a-space>
            <br /> <br />
            {{ $t( 'user.verification-code.required111566110577219') }}
          </div>
          <div>
            <div class="flex items-center pl-4" v-for="(item, i) in treeData">
              <div class="bg-[#2459E5] w-[148px] h-[34px] leading-[34px] text-white my-[30px] text-center">
                {{ item.SourceName }}
              </div>
              <div class="flex flex-col bd-list">
                <div class="flex items-center bd-item" v-for="(item1, i) in item.children">
                  <div class="relative">
                    <div class="open absolute top-[26px] left-[-5px] w-10 h-10 pt-3 pb-2"></div>
                    <div
                      class="bg-[#2459E5] bg-opacity-60  w-[148px] h-[34px] leading-[34px] text-white my-[30px] ml-[30px] text-center">
                      {{
                        item1.SourceName }}
                    </div>
                  </div>

                  <div class="flex flex-col bd-list">
                    <div class="bd-item-1 relative" v-for="(item2, i) in item1.children">
                      <div class="open absolute top-[26px] left-[-5px] w-10 h-10 pt-3 pb-2"></div>
                      <div @click="detail(item2.Id)"
                        class=" bg-[#2459E5] bg-opacity-20 cursor-pointer w-[148px] h-[34px] leading-[34px] text-[#2459E5] my-[30px] ml-[30px] text-center"
                        :class="{ 'select-item': selectId == item2.Id }">
                        {{ item2.SourceName }}{{ item2.Id }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="12">
      <div class="bg-white">
        <div class="p-3   ">

          <div class="text-[#444E84] text-[14px]">
            <a-space>
              <div class="tags"></div>{{ $t( 'user.verification-code.required111566110577220') }}
            </a-space>
            <br /> <br />
            {{ $t('user.verification-code.required111566110577221') }}
          </div>
          <div>
            <a-card class="mt-[10px] tableBuild">
              <!-- 主列表 -->
              <a-table ref="table" size="middle" class="h-full overflow-x-auto" :columns="columns" :dataSource="listData"
                :pagination="true" :loading="listLoading" :rowKey="record => record.Id">
              </a-table>
            </a-card>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>
  
<script>
import { getMetaDataList, deleteMetaData } from '@/api/index'

import { listToTree } from '@/utils/util'


export default {
  components: {},
  data() {
    return {
      listLoading: false,
      bgMap: [1, 1, 0.6, 0.4, 0.2, 0.1],
      loading: false,
      treeData: [],
      mateData: [],
      selectId: 0,
      columns: [
        {
          title: '表头',
          className: 'min-w-90p',
          dataIndex: 'Id',
          align: 'center'
        }, {
          title: '备注(数据项)',
          className: 'min-w-90p',
          dataIndex: 'Id',
          align: 'center'
        }, {
          title: '最后更新日期',
          className: 'min-w-90p',
          dataIndex: 'Id',
          align: 'center'
        }, {
          title: '状态',
          className: 'min-w-90p',
          dataIndex: 'Id',
          align: 'center'
        }, {
          title: '操作',
          className: 'min-w-90p',
          dataIndex: 'Id',
          align: 'center'
        }, {
          title: '日期',
          className: 'min-w-90p',
          dataIndex: 'Id',
          align: 'center'
        }
      ],
      listData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      try {
        // const { data } = await getMetaDataList()
        const data = [
          {
            "Id": 1,
            "SourceCreatetime": "2023-04-25T18:02:50Z",
            "SourceUpdatetime": "2023-04-25T18:07:50Z",
            "SourceName": "一级分类",
            "SourceSuperior": 0,
            "SourceDelete": 1
          },
          {
            "Id": 2,
            "SourceCreatetime": "2023-04-25T18:02:59Z",
            "SourceUpdatetime": "2023-04-26T11:10:12Z",
            "SourceName": "二级分类",
            "SourceSuperior": 1,
            "SourceDelete": 1
          },
          {
            "Id": 3,
            "SourceCreatetime": "2023-04-25T18:02:59Z",
            "SourceUpdatetime": "2023-04-26T11:10:12Z",
            "SourceName": "二.1级分类",
            "SourceSuperior": 1,
            "SourceDelete": 1
          },
          {
            "Id": 4,
            "SourceCreatetime": "2023-04-25T18:44:35Z",
            "SourceUpdatetime": "",
            "SourceName": "三级分类",
            "SourceSuperior": 2,
            "SourceDelete": 1
          },
          {
            "Id": 5,
            "SourceCreatetime": "2023-04-25T18:44:55Z",
            "SourceUpdatetime": "",
            "SourceName": "四级分类",
            "SourceSuperior": 2,
            "SourceDelete": 1
          },
          {
            "Id": 6,
            "SourceCreatetime": "2023-04-26T16:25:30Z",
            "SourceUpdatetime": "",
            "SourceName": "1.1级分类",
            "SourceSuperior": 2,
            "SourceDelete": 1
          },
          {
            "Id": 7,
            "SourceCreatetime": "2023-04-26T16:25:35Z",
            "SourceUpdatetime": "",
            "SourceName": "1.2级分类",
            "SourceSuperior": 3,
            "SourceDelete": 1
          },
          {
            "Id": 8,
            "SourceCreatetime": "2023-06-16T17:26:21Z",
            "SourceUpdatetime": "",
            "SourceName": "1.2.3级分类",
            "SourceSuperior": 3,
            "SourceDelete": 1
          },
          {
            "Id": 9,
            "SourceCreatetime": "2023-06-16T17:26:54Z",
            "SourceUpdatetime": "",
            "SourceName": "1.2.3.4级分类",
            "SourceSuperior": 3,
            "SourceDelete": 1
          },
          {
            "Id": 10,
            "SourceCreatetime": "2023-06-16T17:26:54Z",
            "SourceUpdatetime": "",
            "SourceName": "1.2.3.4.5级分类",
            "SourceSuperior": 3,
            "SourceDelete": 1
          },
          {
            "Id": 11,
            "SourceCreatetime": "2023-06-16T17:26:54Z",
            "SourceUpdatetime": "",
            "SourceName": "1.2.3.4.5级分类",
            "SourceSuperior": 3,
            "SourceDelete": 1
          },
          {
            "Id": 11,
            "SourceCreatetime": "2023-06-16T17:26:54Z",
            "SourceUpdatetime": "",
            "SourceName": "1.2.3.4.5级分类",
            "SourceSuperior": 3,
            "SourceDelete": 1
          }
        ]
        this.mateData = [...data]
        const listData = listToTree([...data], {
          id: 'Id',
          pid: 'SourceSuperior',
          branch: 'children',
          name: 'SourceName',
        })
        this.treeData = listData
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },

    detail(id) {
      this.selectId = id
    }
  },
}
</script>

<style lang="css">
/*新增/编辑 数据等级*/
.tags-text {
  left: 312px;
  top: 284px;
  width: 110px;
  height: 22px;
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.05px;
  line-height: 21.95px;
  color: rgba(34, 44, 100, 1);
  text-align: left;
  vertical-align: top;
}


.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}

/*形状 19998*/
.process-img {
  left: 949px;
  top: 0;
  width: 80px;
  height: 549px;
  opacity: 1;
  background: url(https://img.js.design/assets/img/647e007af3316a25d487b9c2.png);
}
</style>

<style lang="less" scoped> // 关闭样式

 :deep(.ant-tree-switcher_close) {
   background: url(~@/assets/icons/close.svg) no-repeat center !important;

   i {
     display: none;
   }
 }

 //打开样式
 .open {
   background: url(~@/assets/icons/open.svg) no-repeat center;
 }

 .bd-list {

   .bd-item:first-child,
   .bd-item-1:first-child {
     position: relative;

     &::before {
       position: absolute;
       left: 15px;
       top: 50%;
       content: ' ';
       background: #2459E5;
       height: 50%;
       width: 1px;
     }
   }

   .bd-item :not(:first-child):not(:last-child),
   .bd-item-1 :not(:first-child):not(:last-child) {
     position: relative;

     &::before {
       position: absolute;
       left: 15px;
       top: 0;
       content: ' ';
       background: #2459E5;
       height: 100%;
       width: 1px;
     }
   }

   .bd-item:last-child,
   .bd-item-1:last-child {
     position: relative;

     &::before {
       position: absolute;
       left: 15px;
       bottom: 50%;
       content: ' ';
       background: #2459E5;
       height: 50%;
       width: 1px;
     }
   }

   .bd-item:only-child,
   .bd-item-1:only-child {
     position: relative;

     &::before {
       display: none !important;
     }
   }
 }

 .select-item {

   border-radius: 2px;
   background: rgba(0, 0, 0, 0.2);
   color: #fff;
 }
</style>